<template>
    <div class="rb-t">
        <n-image width="200" height="200" :src="playListInfo.coverImgUrl + '?param=200y200'"></n-image>
        <div class="ml-12 mt-4 w-full">
            <div class="flex w-full">
                <p class="text-2xl" :title="playListInfo.name">{{calString(playListInfo.name, 20)}}</p>
                <div class="my-auto ml-auto">
                    <p class="mx-4">编辑</p>
                </div>
            </div>
            <div class="my-2 flex items-center">
                <n-image width="30" height="30" :src="playListInfo.creator.avatarUrl + '?param=30y30'"></n-image>
                <p class="mx-4" :title="playListInfo.creator.nickname">{{ calString(playListInfo.creator.nickname, 20) }}</p>
                <n-icon size="20">
                    <svg t="1628902869575" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="1905" width="200" height="200">
                        <path
                            d="M512 929.959184c-230.4 0-417.959184-187.559184-417.959184-417.959184s187.559184-417.959184 417.959184-417.959184 417.959184 187.559184 417.959184 417.959184-187.559184 417.959184-417.959184 417.959184z m0-794.122449c-207.412245 0-376.163265 168.75102-376.163265 376.163265s168.75102 376.163265 376.163265 376.163265 376.163265-168.75102 376.163265-376.163265-168.75102-376.163265-376.163265-376.163265z"
                            p-id="1906" fill="#8a8a8a"></path>
                        <path
                            d="M718.367347 538.122449h-208.979592c-11.493878 0-20.897959-9.404082-20.897959-20.897959s9.404082-20.897959 20.897959-20.897959h208.979592c11.493878 0 20.897959 9.404082 20.897959 20.897959s-9.404082 20.897959-20.897959 20.897959z"
                            p-id="1907" fill="#8a8a8a"></path>
                        <path
                            d="M509.387755 538.122449c-11.493878 0-20.897959-9.404082-20.897959-20.897959V256c0-11.493878 9.404082-20.897959 20.897959-20.897959s20.897959 9.404082 20.897959 20.897959v261.22449c0 11.493878-9.404082 20.897959-20.897959 20.897959z"
                            p-id="1908" fill="#8a8a8a"></path>
                    </svg>
                </n-icon>
                <span class="ml-2 font-light">创建时间: {{calData(playListInfo.createTime)}}</span>
            </div>
    
            <PlayIcon :comment-count="playListInfo.commentCount"
                      :share-count="playListInfo.shareCount" :id="playListInfo.id"
                      :list-song="playListInfo.tracks.slice(pageMaxItems * (page -1), pageMaxItems * page)"
                      is-one="isOne"></PlayIcon>
        </div>
    </div>
    <div class="mt-4">
        <song-list-detail :id="playListInfo.id" :track-count="playListInfo.trackCount"
                          :play-count="playListInfo.playCount"
                          :tracks="playListInfo.tracks.slice(pageMaxItems * (page -1), pageMaxItems * page)"></song-list-detail>
        <div class="flex items-center justify-center my-2">
            <p>只显示20条数据</p>
        </div>
        <div class="flex items-center justify-center mt-2">
            <n-pagination v-model:page="page" :page-count="pageCount" show-quick-jumper/>
        </div>
    </div>
    <div class="mt-4">
        <comment-on :comment-count="playListInfo.commentCount" :comment-type=2 :id="pid"></comment-on>
    </div>
</template>

<script>
import {NImage, NPagination, NIcon} from 'naive-ui';
import CommentOn from "@/components/comment/CommentOn";
import PlayIcon from "@/components/PlayIcon";
import SongListDetail from "@/components/song/SongListDetail";
import {onMounted, reactive, toRefs, watchEffect} from "vue";
import {getPlayListDetail} from "@/network/song/song-list";
import {calString, calData, calInteger} from "@/util/cal";

export default {
    // 带评论的歌单列表组件
    name: "PLWithComment",
    props: {
        arId: {
            type: String,
            default: '-1'
        },
        pid: {
            type: String,
            default: '-1'
        }
    },
    setup(props) {
        const TAG = "PLWithComment.vue";
        const PLWCInfo = reactive({
            playListInfo: {
                name: '',
                creator: {
                    nickname: ''
                },
                createTime: '',
                tracks: []
            },
            page: 1,
            pageCount: 1,
            pageMaxItems: 10,
            isOne: false
        })
        const refreshData = () => {
            getPlayListDetail(props.pid).then(res => {
                PLWCInfo.page = 1;
                PLWCInfo.playListInfo = res.data.playlist;
                PLWCInfo.pageCount = calInteger(res.data.playlist.trackCount / PLWCInfo.pageMaxItems);
                PLWCInfo.pageCount = PLWCInfo.pageCount >= 2 ? 2: PLWCInfo.pageCount;
                console.log(PLWCInfo.playListInfo);
            })
        }
        onMounted(() => {
            watchEffect(() => {
                let currentid = props.pid;
                if (props.pid === -1) {
                    return null;
                }
                setTimeout(() => {
                    refreshData();
                }, 500)
            })
        })
        return {
            ...toRefs(PLWCInfo),
            calString,
            calData
        }
    },
    components: {
        CommentOn,
        PlayIcon,
        SongListDetail,
        NPagination,
        NIcon,
        NImage
    }
}
</script>

<style scoped lang="scss">
.rb-t {
    @apply flex border p-1 w-full;
}

</style>